<template>
  <div id="soures">
    <h2>课程管理</h2>
    <div class="line"></div>
    <div>
      <div class="form-group">
        <input
          class="form-control"
          type="text"
          placeholder="课程名称"
          v-model="form_data.username"
        />
      </div>
      <div class="form-group">
        <input
          class="form-control"
          type="text"
          placeholder="授课老师"
          v-model="form_data.phone"
        />
      </div>
      <div class="form-group">
        <input
          class="form-control"
          type="text"
          placeholder="开课时间"
          v-model="form_data.note"
        />
      </div>
      <div class="form-group">
        <button class="btn success" @click="add">添加</button>
      </div>
    </div>
    <table cellpadding="0" cellspacing="0" width="100%">
      <thead>
        <tr class="active">
          <td width="120">课程名称</td>
          <td>授课老师</td>
          <td>开课时间</td>
          <td>操作</td>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(student, index) in student_list" :key="index">
          <td>{{ student.username }}</td>
          <td>{{ student.phone }}</td>
          <td>{{ student.note }}</td>
          <td>
            <button class="btn danger" @click="del(index)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>
  </div>
</template>

<script>

export default {
  
  data() {
    return {
      form_data: {
        username: "",
        phone: "",
        note: "",
      }, //表单的数据结构
      student_list: [
                { username: "web", phone: "边老师", note: "2021-7-10" },
                { username: "ui", phone: "李老师", note: "2021-8-10" },
                { username: "c", phone: "王老师", note: "2021-9-10" }
                ], //存储表格当中所有学员的信息
    };
  },
  methods: {
    add() {
      if (this.form_data.username.trim() === "") {
        return alert("课程名称不可以为空。");
      }
      if (this.form_data.phone.trim() === "") {
        return alert("授课老师不可以为空。");
      }
      if (this.form_data.note.trim() === "") {
        return alert("开课时间不可以为空。");
      }

      var obj = {
        username: this.form_data.username,
        phone: this.form_data.phone,
        note: this.form_data.note,
      };
      this.student_list.unshift(obj);
      this.reset();
      // console.log(this.form_data);
    },
    del(index) {
      this.student_list.splice(index, 1);
    },
    reset() {
      this.form_data = {
        username: "",
        phone: "",
        note: "",
      };
    },
    clear() {
      this.student_list = [];
    },
  },
};
</script>

<style>
* {
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}

#soures {
  width: 90%;
  min-width: 400px;
  margin: 20px auto;
}

.form-group {
  margin: 15px 0;
}

.form-control {
  height: 40px;
  padding: 10px;
  width: 100%;
  border: 1px solid #ddd;
  border-radius: 4px;
}

tr {
  height: 60px;
  text-align: center;
}

.active {
  background-color: #eee;
}

table {
  width: 100%;
}

table,
th,
td {
  border: 1px solid #ccc;
  /* 合并边框 */
  border-collapse: collapse;
}

.btn {
  border: 0;
  width: 70px;
  line-height: 35px;
  text-align: center;
  color: #555;
  background: #eee;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 700;
  outline: 0;
  margin: 0 2px;
}

.btn.danger {
  background-color: #d9534f;
  color: #fff;
}

.btn.success {
  background-color: #337ab7;
  color: #fff;
}

.line {
  border-bottom: 1px solid #ddd;
  margin: 10px 0;
}
</style>